<script lang="ts" setup>
import forget from "./components/forget_password.vue";
import { ref } from 'vue'
import { loginType } from '@/types/login';
const activeName = ref('first')
import { loginApi, registerApi } from '../../api/login'
import { showToast } from '@/utils/showTost.js'
import { useRouter } from 'vue-router'
import { useUserInfoStore } from '@/store/userinfo.js'
const store = useUserInfoStore()
// 登录表单
const form = ref<loginType>({
	account: '',
	password: '',
})
// 表单规则
const formRules = {
	account: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		{ min: 3, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }
	]
}
// 注册表单
const registerForm = ref<loginType>({
	account: '',
	password: '',
	rePassword: ''
})

// 注册表单规则
const validatorRepassword = (rule:any, value:any, cb:any) => {
	if (value === '') {
		cb(new Error('请再次输入密码'))
	} else if (value !== registerForm.value.password) {
		cb(new Error('两次输入密码不一致!'))
	} else {
		cb()
	}
}
const registerFormRules = {
	account: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		{ min: 3, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }
	],
	rePassword: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ validator: validatorRepassword, trigger: 'blur' }
	]
}
// 获取忘记密码dislog实例
const forgetRef = ref<any>(null)
// 点击忘记密码
const forgetHandle = () => {
	console.log(forgetRef.value.showDialog());
}


// 注册表单实例
const registerFormRef = ref(null)
// 点击注册按钮
const handleClickRegister = async () => {
	console.log(registerForm.value);
	await registerFormRef.value.validate()
	const res = await registerApi(registerForm.value)
	registerFormRef.value.resetFields()
	activeName.value='first'
	showToast(res.data)
}
// 登录表单实例
const loginFormRef = ref(null)
// 登录表单登录
const router=useRouter()
const handleClickLogin = async () => {
	await loginFormRef.value.validate()
	const res = await loginApi(form.value)
	// console.log(res.data);
	// 根据id 获取用户信息
	console.log(store.getUserInfo(res.data.results.id));
	
	// store.changeId(res.data.results.id)
	showToast(res.data)	
	localStorage.setItem('token', res.data.token)
	loginFormRef.value.resetFields()
	router.replace('/')
}
</script>
<template>
	<div class="common-layout">
		<el-container>
			<el-header class="header-wrapped">
				<div class="header-content">
					<h3>通用后台管理系统</h3>
					<span>欢迎您的登陆</span>
				</div>
			</el-header>
			<el-main>
				<div class="main-wrapper">
					<div class="main-content">
						<el-card class="box-card">

							<el-tabs v-model="activeName" stretch class="demo-tabs">
								<el-tab-pane label="登录" name="first">
									<!-- 登录表单 -->
									<el-form :model="form" label-width="auto" style="min-height: 180px;" size="large"
										class="login-form" :rules="formRules" ref="loginFormRef">

										<el-form-item label="用户名:" prop="account">
											<el-input v-model="form.account" placeholder="请输入用户名" />
										</el-form-item>
										<el-form-item label="密码:" prop="password">
											<el-input v-model="form.password" placeholder="请输入密码" />
										</el-form-item>
										<div class="forget-password" @click="forgetHandle">忘记密码</div>
										<div class="forget">
											<div class="login-btn">
												<el-button type="primary"
												@click="handleClickLogin"
												>登录</el-button>
											</div>
											<div class="go-registr">
												还没有账号？ <span class="go-registr-str">去注册</span>
											</div>
										</div>
									</el-form>

								</el-tab-pane>
								<el-tab-pane label="注册" name="second">
									<!-- 注册表单 -->
									<el-form :model="registerForm" label-width="auto" size="large" class="login-form"
										ref="registerFormRef" :rules="registerFormRules">
										<el-form-item label="用户名:" prop="account">
											<el-input placeholder="请输入账号" v-model="registerForm.account" />
										</el-form-item>
										<el-form-item label="密码:" prop="password">
											<el-input placeholder="请输入密码" v-model="registerForm.password" />
										</el-form-item>
										<el-form-item label="确认密码:" prop="rePassword">
											<el-input placeholder="请确认密码" v-model="registerForm.rePassword" />
										</el-form-item>
										<div class="forget">
											<div class="register-btn">
												<el-button type="primary" @click="handleClickRegister">注册</el-button>
											</div>
										</div>
									</el-form>
								</el-tab-pane>
							</el-tabs>

						</el-card>
					</div>
				</div>
			</el-main>
			<el-footer class="footer-wrapped">
				<div class="footer-content">
					<span>通用后台管理系统</span>|
					<span>通用后台管理系统</span>|
					<span>通用后台管理系统</span>|
					<span>通用后台管理系统</span>|
					<span>通用后台管理系统</span>
				</div>
			</el-footer>
		</el-container>
	</div>
	<forget ref="forgetRef"></forget>
</template>



<style scoped lang="scss">
@import './index.css'
</style>
